<template>
    <div id="Radar" :style="{height:height}" :title="title" :indicator="indicator" :legendData="legendData"
         :seriesData="seriesData">
    </div>
</template>
<script>
    import {on, off} from './tools'

    export default {
        name: 'Radar',
        props: {
            seriesData: Array,
            indicator: Array,
            legendData: {
                type: Array
            },
            height: {
                type: String,
                default: "254px"
            },
            title: String
        },
        data() {
            return {
                msg: '',
                chart: null,
                width: "100%",
                option: {
                    color: ["#84bafd",
                        "#6ad9e6",
                        "#ffb980",
                        "#59678c",
                        "#9a7fd1",
                        "#97b552",
                        "#588dd5",
                        "#fb6260"],
                    title: {
                        text: '',
                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        data: [],
                        left: 'right',

                    },
                    radar: {
                        // shape: 'circle',
                        indicator: [],
                        name: {
                            textStyle: {
                                color: '#666',
                                borderRadius: 3,
                                padding: [3, 5]
                            }
                        }
                    },
                    series: [{
                        name: '',
                        tooltip: {
                            trigger: 'item'
                        },
                        type: 'radar',
                        data: []
                    }]
                }
            }
        },
        beforeDestroy() {
            off(window, 'resize', this.resize)
        },
        methods: {
            resize() {
                this.chart.resize()
            },
            drawLine() {
                // 基于准备好的dom，初始化echarts实例
                let myChart = this.$echarts.init(document.getElementById('Radar'))
                this.chart = myChart;
                // 绘制图表
                // this.option.series[0].data = this.seriesData;
                this.option.title.text = this.title;
                this.option.legend.data = this.legendData;
                this.option.series[0].data = this.seriesData;
                this.option.radar.indicator = this.indicator;
                myChart.setOption(this.option);
                on(window, 'resize', this.resize)
            },

        }
    }

</script>
<style>
    #Bar div {
        width: 100%;
    }
</style>
